<template>
  <!-- 来源订单大类 -->
  <div>
    <el-row>
      <el-col :span="8">
        <el-select
          :disabled="readonly"
          v-model="limitType"
          :placeholder="$t('请选择')"
          @change="changeStatus"
          value-key="code"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="16" v-if="limitType == 2">
        <el-popover
          v-if="readonly && checkedData && checkedData.length > 2"
          placement="top"
          title=""
          width="200"
          trigger="hover"
        >
          <ul>
            <li v-for="(it, i) in selectData" :key="i">{{ it }}</li>
          </ul>
          <template slot="reference">
            <el-select v-model="checkedData" multiple collapse-tags>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-popover>
        <el-select
          v-else
          v-model="checkedData"
          multiple
          :collapse-tags="checkedData && checkedData.length > 2"
          @change="changeData"
          value-key="transportWayCode"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'orderTypes',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
    type: Number,
  },
  data() {
    return {
      options: [
        { value: 0, label: this.$t('入库') },
        { value: 1, label: this.$t('验收') },
        { value: 2, label: this.$t('加工') },
        { value: 3, label: this.$t('货转') },
        { value: 4, label: this.$t('期货') },
      ],

      checkedData: [],
      warehouseId: null,
      serviceTypeCode: null,
      limitType: 1,
      statusList: [
        { value: 1, label: this.$t('不限') },
        { value: 2, label: this.$t('指定') },
      ],

      selectData: null,
      readonly: false,
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    if (this.type == 1) {
      this.$emit('input', String(this.limitType))
    }
    if (this.value) {
      this.setData()
    }
  },
  methods: {
    setData() {
      this.checkedData = JSON.parse(this.value).checkedData
      this.selectData = JSON.parse(this.value).selectData
      this.limitType = JSON.parse(this.value).limitType
    },
    changeStatus(val) {
      this.checkedData = null
      this.selectData = null
      if (val == 1) {
        this.$emit('input', String(val))
      } else {
        this.$emit('input', '')
      }
    },
    changeData(val) {
      this.selectData = []
      val &&
        val.map((it) => {
          this.options &&
            this.options.map((item) => {
              if (it == item.value) {
                this.selectData.push(item.label)
              }
            })
        })
      if (val && val.length) {
        this.$emit('input', JSON.stringify(this.checkedData))
      } else {
        this.$emit('input', '')
      }
    },
    getData() {
      return {
        value: this.selectData && this.selectData.join(','),
        selectData: this.selectData,
        checkedData: this.checkedData,
        limitType: this.limitType,
      }
    },
  },
}
</script>
